<template>
	<div class="information" id="messageSummary">
		<p class="information-title">信息汇总情况</p>
		<template v-for="(item, index) in informationData">
			<div class="message" :key="index">
				<div class="title">
					<span class="desc">{{ item.title ? item.title : '- -' }}</span>
					<span class="times">{{ item.duration ? item.duration / 1000 + 's' : '- - ' }}</span>
				</div>
				<div class="splitLine flex-col"></div>
				<span class="question">{{ item.ask ? item.ask : '- -' }}</span>
				<span class="answer">{{ item.answer ? item.answer : '- -' }}</span>
			</div>
		</template>
		<div class="information-bottom">
			<Button id="unconfirm" @click="responseMessageSummary('rejected')"><span>不确认</span></Button>
			<Button id="confirm" @click="responseMessageSummary('done')" type="success">确认</Button>
		</div>
	</div>
</template>
<script>
import ivcs from '../ivcs-sdk';
export default {
	props: {
		informationData: {
			type: Array,
			default: () => [],
			required: true
		},
		responseViewResource: {
			type: Function,
			default: null
		},
		responseReadWatingData: {
			type: Object,
			default: () => {}
		},
		cmdId: {
			type: Number,
			default: () => 0
		},
		clientId: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
			scrollTop: 0 // 记录当前的滚动距离
		};
	},
	watch: {
		scrollTop(newValue, oldValue) {
			setTimeout(() => {
				if (newValue == window.scrollY) {
					//延时执行后当newValue等于window.scrollY，代表滚动结束
					console.log('滚动结束');
					this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
					this.removeSnapshotInMixStream();
					this.snapshotWithMessageSummary();
				}
			}, 20); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
			if (this.oldScrollTop == oldValue) {
				//每次滚动开始时oldScrollTop与oldValue相等
				console.log('滚动开始');
			}
		}
	},
	created() {},
	mounted() {
		this.handleScroll();
		this.$nextTick(() => {
			this.snapshotWithMessageSummary();
		});
	},
	methods: {
		handleScroll() {
			window.addEventListener('scroll', () => {
				this.scrollTop = window.scrollY;
			});
		},

		//响应查阅等待的信息汇总 status: done 确认 rejected 不确认
		responseMessageSummary(status) {
			let confirm = document.getElementById('confirm');
			let unconfirm = document.getElementById('unconfirm');
			if (status === 'done') {
				confirm.classList.add('btn-opacity-confirm');
			} else {
				unconfirm.classList.add('btn-opacity-unconfirm');
			}
			this.removeSnapshotInMixStream();
			this.snapshotWithMessageSummary();
			setTimeout(() => {
				this.removeSnapshotInMixStream();
				//响应查阅等待的信息汇总 status:done 确认 failed 不确认
				this.responseViewResource(
					this.cmdId,
					status,
					this.responseReadWatingData,
					this.clientId,
					res => {
						console.log(res, 'Confirm information Success');
					},
					err => {
						console.log(err, 'Confirm information Error');
					}
				);
				this.$emit('closeMessageSummaryView');
			}, 1000);
		},

		//根据dom元素截取屏幕快照,并绘制到录像文件中
		snapshotWithMessageSummary() {
			let body = document.getElementById('messageSummary'); //dom元素
			let addToMixStream = true; //是否需要添加到录像文件中
			let addPictureParameter = { x: 340, y: 0, width: parseInt(window.screen.width / 2), height: parseInt(window.screen.height / 2) }; //照片添加到录像文件的参数
			let addpictureSnapshot = {
				width: window.screen.availWidth,
				height: window.screen.availHeight,
				x: 0,
				y: window.scrollY,
				scrollY: window.scrollY
			}; //截图宽高滑动比例
			ivcs.client.snapshot(
				body,
				addpictureSnapshot,
				addToMixStream,
				addPictureParameter,
				res => {
					console.log(res, 'snapshotWithMessageSummary Success');
				},
				err => {
					console.log(err, 'snapshotWithMessageSummary Error');
				}
			);
		},
		//混流中移除录像文件
		removeSnapshotInMixStream() {
			let pictureId = 'all'; //all表示所有图片
			ivcs.client.removeSnapshotInMixStream(
				pictureId,
				res => {
					console.log(res, 'removeSnapshotInMixStream Success');
				},
				err => {
					console.log(err, 'removeSnapshotInMixStream Error');
				}
			);
		}
	}
};
</script>
<style scoped>
@import '../../static/css/animation.css';
.information {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
	z-index: 60;
	position: absolute;
	top: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.information .information-title {
	font-size: 22px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #212121;
	padding-top: 19px;
	padding-bottom: 22px;
}
.information .information-bottom {
	padding: 20px;
	background-color: #f6f6f6;
	display: flex;
	justify-content: space-evenly;
	user-select: none;
}
.information .information-bottom .ivu-btn {
	width: 154px;
	height: 44px;
	border-radius: 4px;
}
.information .information-bottom .ivu-btn-success {
	background: #64caab;
}

.information .information-bottom .ivu-btn-default span {
	color: #64caab;
}

.information .information-bottom .ivu-btn-default {
	border: 1px solid #64caab;
	background: #ffffff;
}

.information .message {
	margin: 10px 10px;
	background: #ffffff;
	box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
	border-radius: 6px;
}
.information .message .title {
	display: flex;
	justify-content: space-between;
	padding-top: 9px;
}
.information .message .title .desc {
	margin-left: 10px;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
}
.information .message .title .times {
	margin-right: 10px;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
}
.information .message .splitLine {
	height: 1px;
	background: #e3e3e3;
	margin: 6px 10px;
}
.information .message .question {
	display: block;
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 14px;
	font-family: PingFangSC-Regular;
	text-align: left;
	margin: 10px 10px;
	white-space: break-spaces;
}
.information .message .answer {
	display: block;
	overflow-wrap: break-word;
	color: rgba(187, 187, 187, 1);
	font-size: 12px;
	font-family: PingFangSC-Regular;
	text-align: left;
	margin: 0 10px;
	padding-bottom: 12px;
}
</style>
